<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 30px">
      <el-card style="width: 80%;margin: 10px">
        <div style="display: flex;border-bottom: 2px solid #8c8c8c">
          <div style="flex: 1;height: 50px;font-size: 25px">用户 <span
              style="color: #409EFF">{{ userName }}</span> 的钱包
          </div>
          <div style="height: 50px;font-size: 25px;flex: 1">
            <el-input style="width: 200px;margin: 0 15px" placeholder="请输入用户账户" v-model="user_name" type="number" min="0"
                      :controls="false"></el-input>
            <el-button type="primary" size="medium" @click="load()" style="height: 40px">查询</el-button>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
          <div style="flex: 1">
            <div style="display: flex">
              <div>
                <div style="width: 65px">当前余额</div>
                <div style="color: #32b0ff;font-weight: bold;font-size: 24px">{{ balance }}</div>
              </div>
              <div style="margin-left: 350px;margin-top: 10px">
<!--                <el-button type="warning" size="medium" style="height: 40px;margin-left: 300px"-->
<!--                           @click="dialogRecharge = true" v-if="userName">充值-->
<!--                </el-button>-->
              </div>
            </div>
          </div>
          <div style="flex: 1">
            <div style="margin-top: 20px">
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div style="display: flex;justify-content: center">
      <el-card style="width: 80%;margin: 10px">
        <div style="height: 50px;font-size: 25px">账单明细</div>
        <div style="margin-bottom: 10px"></div>
        <el-table ref="shopsTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="time" label="时间 " align="center"></el-table-column>
          <el-table-column prop="type" label="类型 "></el-table-column>
          <el-table-column prop="amount" label="金额 "></el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
        <el-dialog title="提示" :visible.sync="dialogRecharge" width="30%">
      <el-form ref="moneyRef" :model="RechargeForm" :rules="rules" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="充值" prop="money">
            <el-input v-model="RechargeForm.money" placeholder="金额" type="text" maxlength="10"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="Recharge()">确认</el-button>
          <el-button type="info" @click="dialogRecharge = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userMoney",
  data() {
    return {
      dialogCoupon: false,
      dialogRecharge: false,
      integral: '',
      RechargeForm: {
        money: "",
      },
      user_name:"",
      userName: "",
      user_id: "",
      tableData: [], //表中数据
      couponData: [],
      pageNum: 1,   //当前页码
      pageSize: 5,    //每页数量
      total: 0,
      balance: 0,
      rules: {
        money: [
          {required: true, message: '请输入充值金额', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.load();
  },
  methods: {
    handleCurrentChange(pageNum) {//下一页
      this.load(pageNum)
    },
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum
      console.log("this.pageNum", this.pageNum)
      this.$request.post('/user_wallet_detail/', {
        "username": this.user_name,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.detail
          this.balance = res.data.balance
          this.total = res.data.item_amount
          //this.user_id = this.tableData.id
          this.userName = this.user_name
          console.log("tableData", res.data)
          this.$message.success("查询成功")
        } else {
          this.$message.warning("找不到该用户")
        }
      })
    },
    Recharge() {
      this.$refs['moneyRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/user_wallet_recharge/', {
            "user_id": this.user_id,
            "amount": this.RechargeForm.money,
          }).then(res => {
            if (res.code === '200') {
              this.load();
              this.$message.success('充值成功')
              this.dialogRecharge = false;
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
  }
}
</script>
<style scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield;
}

/deep/ inpit {
  border: none
}
</style>